<template>
  <VueDraggable
    ghost-class="ghost-placeholder"
    class="grid grid-cols-2 gap-x-2 gap-y-2"
    v-model="dragComList"
    :animation="150"
    :group="{ name: 'editor', pull: 'clone', put: false }"
    :sort="false"
    :clone="() => {}"
  >
    <template v-for="item in dragComList" :key="item.materialName">
      <el-button style="margin: 0" class="w-full" text bg>
        {{ item.comName }}
      </el-button>
    </template>
  </VueDraggable>
</template>

<script setup lang="ts">
import type { ISurveyGroup } from "@/types/editor";
import { VueDraggable } from "vue-draggable-plus";

const props = defineProps<{
  surveyItem: ISurveyGroup["list"];
}>();

const dragComList = ref([...props.surveyItem]);
</script>

<style scoped lang="scss"></style>
